<!DOCTYPE html>
<html>
<head lang="en">
    <%include ../base/include.ejs%>
    <link rel="stylesheet" href="/plugin/jacaranda/jacaranda.css">
    <script type="text/javascript" src="/plugin/jacaranda/jacaranda.js"></script>
</head>
<body>
<%include ../base/menu.ejs%>
<div class="container ya-content">
    <div class="row">
        <div class="col-md-3">
            <%include ./projectMenu.ejs%>
        </div>
        <div class="col-md-9">
            <div class="col-md-12">
                <label>输入一个整数来看看效果</label>
            </div>
            <div>
                <div class="col-md-3">
                    <input type="text" id="levelInput" class="form-control">
                </div>
                <button id="submitButton" class="btn btn-default">生成</button>
            </div>
            <div class="col-md-12">
                <canvas id="result" height="1000" width="1000"> </canvas>
            </div>
        </div>
    </div>
</div>
<script>
    /**
     * Created by SunLunatic on 2015/4/9.
     */
    var level;
    var table;
    var canvas;
    var ctx;

    $(document).ready(function () {
        $("#turnBlockMenu").addClass("ya-music-listening");
        canvas = $("#result")[0];
        if(!canvas.getContext){
            return alert("亲，换个现代浏览器吧，求你了");
        }
        ctx = canvas.getContext('2d');
        ctx.fillStyle = "#000000";
        $("#submitButton").on("click", function(){
            var level = $("#levelInput").val();
            if(level > 18){
                return alert("这会让你的浏览器崩掉的，如果你确定要这么做，请打开控制台直接调用resolve("+level+");♬");
            }
            resolve(level);
        });
    });

    function checkLine(x){
        for(var y=0; y<level; y++){
            if (table[x][y]["value"]==0) return false;
        }
        return true;
    }

    function touch(x, y){
        table[x][y]["touch"] = true;
        table[x][y]["value"] = table[x][y]["value"]^1;
        if(x > 0)table[x-1][y]["value"] = table[x-1][y]["value"]^1;
        if(x < level-1)table[x+1][y]["value"] = table[x+1][y]["value"]^1;
        if(y > 0)table[x][y-1]["value"] = table[x][y-1]["value"]^1;
        if(y < level-1)table[x][y+1]["value"] = table[x][y+1]["value"]^1;
    }

    function init(){
        table=[];
        for(var x=0; x<level; x++){
            table[x] = [];
            for(var y=0; y<level; y++){
                table[x][y] = {};
                table[x][y]["touch"] = false;
                table[x][y]["value"] = 0;
            }
        }
    }
    /**
     *  从第一行开始穷举 需要2^level次
     *  从第二行开始 如果上一行没有反转 则进行反转
     */
    function resolve(l){
        ctx.clearRect(0, 0, 1000, 1000);
        level = l;
        for(var i=0; i<2<<(level-1); i++) {
            init();
            var t = i;
            var t1 = 0;
            while(t>0){
                if(t%2 == 1)touch(0, t1);
                t = t>>1;
                t1++;
            }

            for(var x=1; x<level; x++){
                for(var y=0; y<level; y++) {
                    if (table[x-1][y]["value"]==0){
                        touch(x, y);
                    }
                }
            }
            ctx.strokeRect(5, 5, 30*l, 30*l);
            if(checkLine(level-1)){
                for(var x=0; x<level; x++){
                    for(var y=0; y<level; y++){
                        if(table[x][y]["touch"])ctx.fillRect(30*x+6, 30*y+6, 28, 28);
                    }
                }
                break;
            }

        }

    }
</script>
</body>
</html>